<template>
  <div class="check-report-container">
    <h2>盘点记录报表</h2>
    
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="计划编号">
          <el-input v-model="searchForm.planNo" placeholder="请输入计划编号"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
            v-model="searchForm.startDate"
            type="date"
            placeholder="选择开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="searchForm.endDate"
            type="date"
            placeholder="选择结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="table-card">
      <div class="table-header">
        <span>盘点记录列表</span>
        <el-button type="primary" size="small" @click="exportReport">导出报表</el-button>
      </div>
      <el-table :data="reportData" style="width: 100%">
        <el-table-column prop="planNo" label="计划编号" width="180"></el-table-column>
        <el-table-column prop="planName" label="计划名称"></el-table-column>
        <el-table-column prop="checkDate" label="盘点日期" width="150"></el-table-column>
        <el-table-column prop="checkPerson" label="盘点人" width="120"></el-table-column>
        <el-table-column prop="totalCount" label="应盘总数" width="100" align="center"></el-table-column>
        <el-table-column prop="checkedCount" label="已盘数量" width="100" align="center"></el-table-column>
        <el-table-column prop="diffCount" label="差异数量" width="100" align="center"></el-table-column>
        <el-table-column prop="completionRate" label="完成率" width="100" align="center">
          <template #default="scope">
            {{ scope.row.completionRate || '0%' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  name: 'CheckReport',
  setup() {
    const searchForm = ref({
      planNo: '',
      startDate: '',
      endDate: ''
    })
    const reportData = ref([])
    const pagination = ref({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

    // 获取盘点记录报表数据
    const getCheckReport = async () => {
      try {
        const params = {
          ...searchForm.value,
          page: pagination.value.currentPage,
          pageSize: pagination.value.pageSize
        }
        
        const response = await axios.get('/api/statistics/asset/check', {
          params
        })
        
        if (response.code === 200 && response.data) {
          reportData.value = response.data.records || response.data
          pagination.value.total = response.data.total || 0
        } else {
          // 使用模拟数据
          reportData.value = [
            {
              planNo: 'CP20241101001',
              planName: '2024年11月月度盘点',
              checkDate: '2024-11-01',
              checkPerson: '张三',
              totalCount: 500,
              checkedCount: 485,
              diffCount: 15,
              completionRate: '97%',
              status: '已完成'
            },
            {
              planNo: 'CP20241001001',
              planName: '2024年10月月度盘点',
              checkDate: '2024-10-01',
              checkPerson: '李四',
              totalCount: 480,
              checkedCount: 480,
              diffCount: 0,
              completionRate: '100%',
              status: '已完成'
            },
            {
              planNo: 'CP20240901001',
              planName: '2024年9月月度盘点',
              checkDate: '2024-09-01',
              checkPerson: '王五',
              totalCount: 450,
              checkedCount: 440,
              diffCount: 10,
              completionRate: '97.78%',
              status: '已完成'
            },
            {
              planNo: 'CP20241102001',
              planName: '2024年11月部门盘点',
              checkDate: '2024-11-05',
              checkPerson: '赵六',
              totalCount: 200,
              checkedCount: 150,
              diffCount: 0,
              completionRate: '75%',
              status: '进行中'
            }
          ]
          pagination.value.total = reportData.value.length
        }
      } catch (error) {
        console.error('获取盘点记录报表失败:', error)
        // 使用模拟数据
        reportData.value = [
          {
            planNo: 'CP20241101001',
            planName: '2024年11月月度盘点',
            checkDate: '2024-11-01',
            checkPerson: '张三',
            totalCount: 500,
            checkedCount: 485,
            diffCount: 15,
            completionRate: '97%',
            status: '已完成'
          },
          {
            planNo: 'CP20241001001',
            planName: '2024年10月月度盘点',
            checkDate: '2024-10-01',
            checkPerson: '李四',
            totalCount: 480,
            checkedCount: 480,
            diffCount: 0,
            completionRate: '100%',
            status: '已完成'
          },
          {
            planNo: 'CP20240901001',
            planName: '2024年9月月度盘点',
            checkDate: '2024-09-01',
            checkPerson: '王五',
            totalCount: 450,
            checkedCount: 440,
            diffCount: 10,
            completionRate: '97.78%',
            status: '已完成'
          },
          {
            planNo: 'CP20241102001',
            planName: '2024年11月部门盘点',
            checkDate: '2024-11-05',
            checkPerson: '赵六',
            totalCount: 200,
            checkedCount: 150,
            diffCount: 0,
            completionRate: '75%',
            status: '进行中'
          }
        ]
        pagination.value.total = reportData.value.length
      }
    }

    // 获取状态标签类型
    const getStatusTagType = (status) => {
      const statusMap = {
        '已完成': 'success',
        '进行中': 'primary',
        '未开始': 'info',
        '已取消': 'danger'
      }
      return statusMap[status] || 'info'
    }

    // 查询
    const search = () => {
      pagination.value.currentPage = 1
      getCheckReport()
    }

    // 重置
    const reset = () => {
      searchForm.value = {
        planNo: '',
        startDate: '',
        endDate: ''
      }
      pagination.value.currentPage = 1
      getCheckReport()
    }

    // 导出报表
    const exportReport = () => {
      // 实际项目中这里可以调用后端导出接口
      console.log('导出盘点记录报表')
      // 模拟导出成功
      alert('报表导出成功')
    }

    // 处理页码大小变化
    const handleSizeChange = (size) => {
      pagination.value.pageSize = size
      getCheckReport()
    }

    // 处理当前页码变化
    const handleCurrentChange = (current) => {
      pagination.value.currentPage = current
      getCheckReport()
    }

    onMounted(() => {
      getCheckReport()
    })

    return {
      searchForm,
      reportData,
      pagination,
      getStatusTagType,
      search,
      reset,
      exportReport,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.check-report-container {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #303133;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.search-form .el-form-item {
  margin-right: 20px;
}

.table-card {
  margin-top: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>